<template>
  <div>
    <el-card>
<!--      <el-input style="width:440px" @clear="searchUser" clearable v-model="searchForm.username" placeholder="请输入用户姓名" class="input-with-select">-->

<!--      </el-input>-->
<!--      <el-input style="width:440px" @clear="searchUser" clearable v-model="searchForm.email" placeholder="请输入用户邮箱" class="input-with-select">-->

<!--      </el-input>-->
<!--      <el-button icon="Search" @click="searchUser" />-->
      <el-button size="small"
                 @click="dialogFormVisible = true;isUpdate = false">添加</el-button>
      <el-table :data="tableData" border style="width: 100%;margin-top:20px">
        <el-table-column prop="dictionaryId" label="字典id" width="180" />
        <el-table-column prop="dictionaryName" label="字典名称" width="240" />
        <el-table-column prop="dictionaryCode" label="字典code" width="180" />
        <el-table-column prop="status" label="状态" width="180" />
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-button type="danger" size="small" @click="deleteDict(scope.row.dictionaryId)">删除</el-button>
            <el-button type="primary" size="small" @click="updateDictOpen(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="margin-top:20px" :current-page="searchForm.current" :page-size="searchForm.size"
                     :page-sizes="[10, 20, 30, 40]" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
    <el-dialog v-model="dialogFormVisible" title="字典编辑器" width="1000"  @close='closeDialog'>
      <el-form :model="form">
        <el-form-item label="字典名称" :label-width="200">
          <el-input v-model="form.dictionaryName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="字典Code" :label-width="200">
          <el-input v-model="form.dictionaryCode" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Order" :label-width="200">
          <el-input v-model="form.sortOrder" autocomplete="off" />
        </el-form-item>
        <el-form-item label="字典值" :label-width="200">
          <el-input
              v-model="form.dictionaryValue"
              style=""
              :autosize="{ minRows: 2, maxRows: 100 }"
              type="textarea"
              placeholder="Please input"
          />
        </el-form-item>
        <el-form-item label="状态" :label-width="200">
          <el-select v-model="form.status" placeholder="Please select a status">
            <el-option label="开启" value="active" />
            <el-option label="关闭" value="inactive" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button v-if="!isUpdate" type="primary" @click="createDict()">
            提交
          </el-button>
          <el-button v-if="isUpdate" @click="updateDict()">
            修改
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import dictAPI from "../../api/dict.js";
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router'
const router = useRouter();
const dialogFormVisible = ref(false);
let form = reactive({})
let isUpdate = ref(false);
// Dom 挂载之后
onMounted(() => {
  getDictList();
})
// 用户数据
let tableData = ref([]);
let total = ref(0);
// 搜索条件
const searchForm = reactive({
  dictionaryCode:'',
  pageNum: 1,
  pageSize: 10,
})
const getDictList = async () => {
  const res = await dictAPI.page(searchForm);
  tableData.value = res.data.data.records;
  total.value = res.data.data.total;
}
const handleSizeChange = (size) => {
  searchForm.size = size;
  getDictList();
}
const handleCurrentChange = (current) => {
  searchForm.current = current;
  getDictList();
}
const searchUser = () => {
  searchForm.current = 1;
  getDictList();
}
const createDict = async ()=>{
  const res = await dictAPI.add(form);
  if (res.data.code === 200) {
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
    dialogFormVisible.value = false;
    form = reactive({})
    await getDictList();
  }else {
    ElMessage.error(res.data.msg);
  }
}

const closeDialog = () => {
  form = reactive({});
}

const updateDictOpen = (data) =>{
  form = data
  isUpdate.value = true;
  dialogFormVisible.value = true;
}
const updateDict = async () => {
  const res = await dictAPI.update(form);
  if (res.data.code === 200) {
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    dialogFormVisible.value = false;
    form = reactive({})
    await getDictList();
  }else {
    ElMessage.error(res.data.msg);
  }
}
// 删除用户
const deleteDict = (id) => {
  ElMessageBox.confirm(
      '确定要删除该字典信息吗?',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    const res = await dictAPI.delDict({ id: id });
    if (res.data.code === 200) {
      ElMessage.success("删除成功")
      await getDictList();
    } else {
      ElMessage.error("删除失败")
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}
</script>

<style lang="scss" scoped>

</style>